<template>
  <div class="course-page">
        <div class="header" v-if="showTabs">
            <div class="top">
                <router-link tag="div" to="/search" class="search">
                    <img src="../assets/images/ic_search.png" alt="">
                    <span>搜索</span>
                </router-link>
                <div class="play">
                    <img src="../assets/images/tianmu_download_ic_play_24dp.png" alt="">
                </div>
            </div>
            <div class="bottom">
                <div class="b-top">
                    <div class="left">
                        <h4>会员全场免费看</h4>
                        <span>&yen;98/年 开通会员</span>
                    </div>
                    <div class="right">
                        <span>您还未开通会员</span>
                    </div>
                </div>
                <div class="b-bot">
                    <span>立即开通</span>
                </div>
            </div>
        </div>
        <div class="context" v-if="showTabs">
            <div class="con_top">
                <h4>会员专享特权</h4>
                <div class="con_img">
                    <div class="img">
                        <img src="../assets/images/kecheng_vip_main1.png" alt="">
                        <span>无限看</span>
                    </div>
                    <div class="img">
                        <img src="../assets/images/kecheng_vip_main2.png" alt="">
                        <span>无广告</span>
                    </div>
                    <div class="img">
                        <img src="../assets/images/kecheng_vip_main3.png" alt="">
                        <span>身份彰显</span>
                    </div>
                </div>
            </div>
            <div class="con_mid">
                <ul class="m-list">
                    <li @click="show(index)" v-for="(item,index) in TabsList" :key="index">
                        <div class="m-img">
                            <img :src="'https://pic.ecook.cn/web/'+item.imageid+'.jpg!s1'" alt="">
                        </div>
                        <span>{{item.title}}</span>
                    </li>
                </ul>
            </div>
            <div class="con_bot">
                <div class="b-title">
                    <h4>课程专辑</h4>
                    <div class="more">
                        <span>查看更多</span>
                    </div>
                </div>
                <div class="b-list" v-if="TeachAlbumList">
                    <ul class="course-list">
                        <router-link tag="li" :to="'/coursealbum?id='+item.id"  v-for="item in TeachAlbumList" :key="item.id">
                            <div class="c-img">
                                <div class="img" 
                                :style="{'background-image':'url(https://pic.ecook.cn/web/'+item.himg+'.jpg!wl280)'}"
                                v-lazy:background-image="'https://pic.ecook.cn/web/'+item.himg+'.jpg!wl280'"
                                ></div>
                                <div class="course-info">
                                    <span>共{{item.teachNum}}节课程</span>
                                </div>
                            </div>
                            <h4 class="one-txt-cut">{{item.title}}</h4>
                        </router-link>
                    </ul>
                </div>
            </div>
            <div class="con_list">
                <div class="l-title">
                    <h4>全部课程</h4>
                    <div class="tap">
                        <span v-for="(item,index) in cousreNav" :key="index" :class="{'active':tabId==index}" @click="checked(item.id,index)">{{item.title}}</span>
                    </div>
                </div>
                <div class="l-list">
                    <ul>
                        <router-link tag="li" :to="'/course?id='+item.id" v-for="item in TeachList" :key="item.id">
                            <div class="l-img">
                                <div class="img" 
                                :style="{'background-image':'url(https://pic.ecook.cn/web/'+item.himg+'.jpg!wl280)'}"
                                v-lazy:background-image="'https://pic.ecook.cn/web/'+item.himg+'.jpg!wl280'"
                                ></div>
                            </div>
                            <h4>{{item.title}}</h4>
                            <span>{{item.teacher.nickname}}</span>
                        </router-link>
                    </ul>
                </div>
            </div>
        </div>
        <tabs-list v-if="!showTabs" @change="change" :title="title" :nav-title="navTitle"></tabs-list>
        <bottom-tab :index=1 ></bottom-tab>
  </div>
</template>

<script>
import BottomTab from "../components/BottomTab.vue"
import TabsList from "../components/TabsList.vue"
import {getOnlineTeachTagsData,getOnlineTeachAlbumListData,getOnlineTeachListData} from '../api/class'
export default {
    data() {
        return {
            showTabs: true,
            TabsList:null,
            TeachAlbumList:null,
            TeachList:[],
            tabId:0,
            cousreNav:[
                {
                    id:'latest',
                    title:'最新'
                },
                {
                    id:'heat',
                    title:'最热'
                },
                {
                    id:'past',
                    title:'往期'
                },
            ],
            title:null,
            navTitle:null,
        };
    },
    methods: {
        change(value){
            this.showTabs=value
        },
        show(index){
            this.title = this.TabsList[index].title
            this.navTitle = this.TabsList[index].list
            this.showTabs = false
        },
        checked(id,index){
            this.TeachList = []
            this.getOnlineTeachListFun(id,0)
            this.tabId = index
        },
        //Tabs数据
        getOnlineTeachTagsFun(){
            getOnlineTeachTagsData().then(data=>{
                console.log(data);
                if (data.data) {
                    this.TabsList = data.data
                }
            })
        },
        //课堂专辑
        getOnlineTeachAlbumListFun(){
            getOnlineTeachAlbumListData().then(data=>{
                console.log(data);
                if (data.list) {
                    this.TeachAlbumList = data.list
                }
            })
        },
        //全部课程
        getOnlineTeachListFun(order,page){
            getOnlineTeachListData({order,type:'video',page}).then(data=>{
                console.log(data);
                if (data.list) {
                    this.TeachList=[...this.TeachList,...data.list]
                }
            })
        }
    },
    created() {
        window.localStorage.setItem("tabId",1)
    
        this.getOnlineTeachTagsFun()
        this.getOnlineTeachAlbumListFun()
        this.getOnlineTeachListFun('latest',0)
        
    },
   components:{
      BottomTab,
      TabsList
    }
};
</script>

<style lang="less">
.course-page {
    width: 100%;
    height: 100%;
    overflow-y: scroll;

    .header {
            width: 100%;
            height: 160px;
            background-color: #47474a;
            position: relative;

            .top {
                width: 100%;
                height: 60px;
                display: flex;
                justify-content: center;
                background-color: #47474a;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                z-index: 99;

                .search {
                    width: 64%;
                    height: 20px;
                    background-color: #707072;
                    padding: 5px 15px;
                    border-radius: 6px;
                    text-align: center;
                    margin-top: 20px;

                    &>img {
                        width: 10px;
                        height: 10px;
                        margin-right: 5px;
                    }

                    &>span {
                        font-size: 13px;
                        color: #b2b2b4;
                    }
                }

                .play {
                    width: 35px;
                    height: 24px;
                    background-color: #a0a1a2;
                    border-radius: 6px;
                    margin-top: 20px;
                    margin-left: 10px;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    &>img {
                        width: 20px;
                        height: 20px;
                        display: block;
                    }
                }
            }

            .bottom {
                width: 88%;
                height: 120px;
                background-image: linear-gradient(90deg, #e4bd86, #a17d4b);
                border-radius: 8px;
                position: absolute;
                top: 75px;
                left: 0;
                right: 0;
                margin: auto;

                .b-top {
                    width: 100%;
                    margin-top: 20px;
                    display: flex;
                    justify-content: space-between;

                    .left {
                        margin-left: 20px;

                        &>h4 {
                            font-weight: 600;
                            font-size: 18px;
                            color: #452a12;
                        }

                        &>span {
                            font-size: 13px;
                            display: block;
                            margin-top: 10px;
                            font-weight: 600;
                        }
                    }

                    .right {
                        margin-right: 10px;

                        &>span {
                            font-size: 12px;
                            color: #684d2c;
                            font-weight: 600;
                        }
                    }
                }

                .b-bot {
                    width: 100%;
                    height: 35%;
                    margin-top: 16px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-color: rgba(0, 0, 0, 0.1);
                    border-bottom-left-radius: 8px;
                    border-bottom-right-radius: 8px;

                    &>span {
                        color: #fff;
                        font-size: 14px;
                    }
                }
            }
        }

        .context {
            width: 100%;

            .con_top {
                width: 100%;

                text-align: center;
                margin-top: 60px;

                &>h4 {
                    font-weight: 600;
                    font-size: 14px;
                }

                .con_img {
                    margin-top: 20px;
                    display: flex;
                    text-align: center;
                    justify-content: space-evenly;

                    .img {
                        display: flex;
                        flex-direction: column;

                        &>img {
                            width: 50px;
                            height: 50px;
                        }

                        &>span {
                            font-size: 13px;
                            font-weight: 600;
                        }
                    }

                }
            }

            .con_mid {
                width: 100%;
                margin-top: 40px;
                display: flex;
                justify-content: center;

                .m-list {
                    width: 85%;
                    height: 220px;
                    display: flex;
                    flex-wrap: wrap;
                    border: 1px solid #f5f5f5;
                    border-radius: 8px;
                    box-shadow: 0px 0px 5px #ccc;

                    &>li {
                        width: 25%;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-evenly;
                        align-items: center;

                        .m-img {
                            width: 40px;
                            height: 40px;
                            border-radius: 50%;
                            background-color: #f7f7f7;
                            display: flex;
                            justify-content: center;
                            align-items: center;

                            &>img {
                                width: 35px;
                                height: 35px;
                            }
                        }

                        &>span {
                            font-size: 13px;
                            font-weight: 600;
                        }
                    }
                }
            }

            .con_bot {
                width: 100%;
                margin-top: 30px;

                .b-title {
                    width: 90%;
                    margin: 0 auto;
                    margin-bottom: 20px;
                    display: flex;
                    justify-content: space-between;

                    &>h4 {
                        font-size: 18px;
                        letter-spacing: 2px;
                        font-weight: 600;
                        margin-left: 5px;
                    }

                    .more {
                        width: 70px;
                        height: 15px;
                        padding: 2px 0;
                        background-color: #ebebeb;
                        font-size: 12px;
                        color: #9f9fa3;
                        text-align: center;
                        line-height: 15px;
                        border-radius: 8px;
                    }
                }

                .b-list {
                    margin-bottom: 25px;
                    overflow: hidden;

                    .course-list {
                        overflow-x: scroll;
                        white-space: nowrap;

                        margin-left: 15px;

                        &>li {
                            display: inline-block;
                            width: 145px;
                            margin: 0 8px 0 0;

                            .c-img {
        
                                height: 180px;
                                margin-bottom: 15px;
                                border-radius: 6px;
                                overflow: hidden;
                                position: relative;

                                .img{
                                    width: 100%;
                                    height: 100%;
                                    background-repeat: no-repeat;
                                    background-position: center;
                                    background-size: cover;
                                }

                                .course-info {
                                    position: absolute;
                                    bottom: 8px;
                                    left: 8px;

                                    &>span {
                                        display: block;
                                        color: #fff;
                                        font-size: 12px;
                                        padding: 4px 5px;
                                        background-color: rgba(0, 0, 0, 0.4);
                                        border-radius: 8px;
                                    }
                                }
                            }

                            &>h4 {
                                font-size: 14px;
                                font-weight: 600;
                                line-height: 22px;
                            }
                        }
                        &::-webkit-scrollbar {
                            display: none;
                        }
                    }
                }
            }

            .con_list {
                // width: 100%;

                .l-title {
                    position: sticky;
                    top: 59px;
                    z-index: 99;
                    width: 100%;
                    height: 45px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    background-color: #fff;

                    &>h4 {
                        font-size: 18px;
                        letter-spacing: 2px;
                        font-weight: 600;
                        margin-left: 20px;
                    }

                    .tap {
                        width: 50%;
                        display: flex;
                        justify-content: space-evenly;

                        &>span {
                            display: block;
                            padding: 4px;
                            background-color: #ebebeb;
                            font-size: 13px;
                            border-radius: 4px;
                            color: #b2b2b4;
                            font-weight: 600;
                        }

                        .active {
                            font-size: 13px;
                            color: #3ab9e1;
                            background-color: #fff;
                            font-weight: 600;
                        }
                    }
                }

                .l-list {
                    width: 100%;
                    padding-bottom: 55px;

                    &>ul {
                        width: 90%;
                        margin: 0 auto;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-between;

                        &>li {
                            width: 48%;
                            margin-bottom: 30px;

                            .l-img {
                                width: 100%;
                                height: 91px;
                                border-radius: 6px;
                                overflow: hidden;
                                margin-bottom: 15px;

                                .img{
                                    width: 100%;
                                    height: 100%;
                                    background-repeat: no-repeat;
                                    background-position: center;
                                    background-size: cover;
                                }
                            }

                            &>h4 {
                                font-weight: 600;
                                margin-bottom: 10px;
                                letter-spacing: 1px;
                                line-height: 20px;
                            }

                            &>span {
                                font-size: 14px;
                                color: #999;
                            }
                        }
                    }
                }
            }
        }
    }
    &::-webkit-scrollbar {
        display: none;
}
</style>